<template>
  <div class="page-cont">
    <van-nav-bar
      title="梁片二维码"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="list">
      <div class="qrcode">
        <img
          :src="downloadQrcode"
          alt=""
        >
      </div>
      <div class="name">
        {{ name }}
      </div>
    </div>
  </div>
</template>

<script>
const jrQrcode = require('jr-qrcode')

export default {
  name: "TmpPage",
  data() {
    return {
      downloadQrcode: '',
      name: ''
    };
  },
  created() {
    let id = this.$route.params.id; // 任务ID
    this.name = this.$route.query.name; // 任务名称
    this.downloadQrcode = jrQrcode.getQrBase64(id)
  }
};
</script>

<style lang="scss" scoped>
.page-cont {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .list {
    flex: 1;
    height: 0;
    overflow: hidden;
    overflow-y: auto;
    .qrcode {
      padding-top: 50px;
      text-align: center;
      img {
        width: 200px;
        height: 200px;
        border: 2px solid rgb(201, 201, 201);
        border-radius: 5px;
      }
    }
    .name {
      text-align: center;
      font-size: 16px;
    }
  }
}
</style>
